<template>
	<view class="content">
		<u-section :title="data[index].type == 1?'判断题':data[index].type == 2?'单选题':'多选题'" :right="false" font-size="36"></u-section>
		<view class="question u-m-t-20 u-m-b-20 u-font-lg">
			{{data[index].question}}
		</view>
		<view v-show="data[index].imageurl" class="img" style="text-align: center;margin: 0 auto;width: 80%;">
			<u-image mode="scaleToFill" width="100%" height="300rpx" :src="data[index].imageurl"></u-image>
		</view>
		<view class="da">
			<view class="item" :class="daColors[index][i+1]" v-for="(item,i) in data[index].options.split(',')" @click="clickDa(i+1)">
				<view class="option">
					{{options[i]}}
				</view>
				<view class="question">
					{{item.replace(/\w{1}:/i,'')}}
				</view>
			</view>
		</view>
		
		<view @click="dxClick" v-show="data[index].type == 3 && !result.hasOwnProperty(index)"  style="margin: 0 auto; width: 30%;border: 1rpx solid #c9cacb;text-align: center;border-radius: 14rpx;font-size: 40rpx;">
			确定
		</view>
		
		<view class="jx u-m-t-10" v-show="result.hasOwnProperty(index)">
			<u-section title="解析" :right="false" font-size="36"></u-section>
			<view class=" u-m-t-20 u-m-b-20 u-font-lg">
				{{data[index].bestanswer}}
			</view>
		</view>
		
		<view class="tabs">
			<view class="item" @click="last">
				上一题
			</view>
			<view class="item mid" @click="tabsMid">
				{{index+1}}/{{count}}
			</view>
			<view class="item" @click="next">
				下一题
			</view>
		</view>
		
		<u-popup v-model="showOrder" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="order">
						<view class="item" :class="result[i]" v-for="(item,i) in count" :key="index" @click="clickOrder(i)">
							{{i + 1}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let dx = ''
	export default {
		data() {
			return {
				data:{},
				count:1,
				options:['A','B','C','D'],
				index:0,
				showOrder:false,
				daColors:{},
				result:{}
			}
		},
		methods: {
			init(km){
				this.$u.api.getOrderTk({km:km}).then(res => {
					this.data = res.data.data;
					this.count = res.data.count;
				})
			},
			last(){
				if(this.index == 0){
					this.showToast('已经是第一题了')
					return;
				}
				--this.index;
				dx = '';
			},
			next(){
				if(this.index + 1 == this.count){
					//最后一题了
					this.showToast('已经是最后一题了')
					return;
				}
				++this.index;
				dx = '';
			},
			clickOrder(index){
				dx = '';
				this.index = index;
				this.showOrder = false;
			},
			tabsMid(){
				this.showOrder = true;
			},
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
				})
			},
			clickDa(da){
				let daColors = this.daColors;
				let index = this.index;
				let question = this.data[index];
				let obj = {};
				let result = this.result;
				if(!daColors.hasOwnProperty(index) && question.type != 3){
					//这道题没做
					//不是多选题
					if(da == question.ta){
						//正确
						obj[da] = 'd';
						this.result[index] = 'd'
					}else{
						obj[da] = 'x';
						obj[question.ta] = 'd'
						this.result[index] = 'x'
					}
					this.daColors[index] = obj;
					//强制渲染
					this.$forceUpdate() 
					if(da == question.ta) ++this.index;
				}else if(!result.hasOwnProperty(index) && question.type == 3){
					//多选
					if(dx.indexOf(da) == -1){
						dx += da
						if(daColors.hasOwnProperty(index) || daColors[index] == {}){
							obj = daColors[index];
							obj[da] = 'y'
						}else{
							obj[da] = 'y'
						}
					}else{
						obj = daColors[index];
						delete obj[da];
						dx = dx.replace(da,'')
						
					}
					console.log(dx)
					this.daColors[index] = obj;
					//强制渲染
					this.$forceUpdate() 
				}
				
			},
			dxClick(){
				let daColors = this.daColors;
				let index = this.index;
				let question = this.data[index];
				let obj = {};
				let result = this.result
				if(this.judgeResultFun(dx.split(''),question.ta.split(''))){
					//正确
					this.result[index] = 'd'
					console.log('d')
				}else{
					//错误
					console.log('x')
					this.result[index] = 'x'
					dx.split('').forEach(item => {
						obj[item] = 'x'
					})
				}
				question.ta.split('').forEach(item => {
					obj[item] = 'd'
				})
				console.log(obj)
				this.daColors[index] = obj;
				//强制渲染
				this.$forceUpdate() 
			},
			judgeResultFun: function (arr1, arr2) {
			    let flag = true
			    if (arr1.length !== arr2.length) {
			        flag = false
			    } else {
			        arr1.forEach(item => {
			            if (arr2.indexOf(item) === -1) {
			                flag = false
			            }
			        })
			    }
			    return flag;
			}
			
		},
		onLoad(option) {
			console.log(option)
			this.init(option.km);
		}
	}
</script>

<style lang="scss">
	.ac{
		color: #FA3534;
	}
	.content{
		padding: 20rpx;
		
	}
	.da{
		.item{
			display: flex;
			margin: 15rpx 0;
			.option{
				height: 60rpx;
				width: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				text-align: center;
				border-radius: 100%;
				border: 1rpx solid #f3f4f6;
			}
			.question{
				margin-left: 5rpx;
				margin-top: 10rpx;
			}
		}
	}
	.tabs{
		height: 100rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #F3F4F6;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		
		.mid{
			line-height: 100rpx;
			padding: 0 40rpx;
			border-left: 1rpx solid #F3F4F6;
			border-right: 1rpx solid #F3F4F6;
			height: 100%;
		}
	}
	
	.order{
		display: flex;
		flex-wrap: wrap;
		.item{
			margin: 5rpx;
			width: 70rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border: 1rpx solid #F3F4F6;
		}
	}
	
	.d{
		color: #19BE6B;
	}
	.x{
		color: #FA3534;
	}
	.y{
		color: #F0AD4E;
	}
</style>
